<template>
<div class="letterOfDeliveryVue">



  <div class="head">
    <div class="btns clearfix">
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="2">
            <p>From:</p>
          </el-col>
          <el-col :span="4">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_from" placeholder="请输入内容">
          </el-col>
          <el-col :span="2">
            <p>To:</p>
          </el-col>
          <el-col :span="4">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_to" placeholder="请输入内容">
          </el-col>
          <el-col :span="6">
            <p>货已好，请订进的仓位</p>
          </el-col>
          <el-col :span="2">
            <p>货代Fax:</p>
          </el-col>
          <el-col :span="4">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_fax" placeholder="请输入内容">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <p>货 运 委 托 书</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-select :disabled="!editable"   @change="handleSimpleSelect"   v-model="documentprocess_cc_lod_transport" placeholder="请选择运输方式">
              <el-option label="海运" value="1">
              </el-option>
              <el-option label="空运" value="2">
              </el-option>
              <el-option label="卡车" value="3">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <p>托运人：</p>
          </el-col>
          <el-col :span="12">
            <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
          </el-col>
          <el-col :span="3">
            <p>合同编号</p>
          </el-col>
          <el-col :span="7">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_contractNO" placeholder="请输入内容">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <p class="bill-of-lading-project-requires-p">提单项目要求:</p>
          </el-col>
          <el-col :span="22" class="-el-col">
            <div class="bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>发货人：</p>
                    </el-col>
                    <el-col :span="20">
                      <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>地址：</p>
                    </el-col>
                    <el-col :span="20">
                      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="4"></el-col>
                    <el-col :span="20">
                      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="4"></el-col>
                    <el-col :span="20">
                      <p>TEL:+86-10-50911288</p>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
            <div class="bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>收货人：</p>
                    </el-col>
                    <el-col :span="20" class="-el-col">
                      <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_consignee" placeholder="请输入内容">
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>地址：</p>
                    </el-col>
                    <el-col :span="20" class="-el-col">
                      <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_caddress" placeholder="请输入内容">
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>电话：</p>
                    </el-col>
                    <el-col :span="20" class="-el-col">
                      <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_ctel" placeholder="请输入内容">
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="4">
                      <p>通知人：</p>
                    </el-col>
                    <el-col :span="20">
                      <p>Same As Consignee</p>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="sea-freight">
          <el-col :span="4">
            <p>海洋运费 SEA FREIGHT</p>
          </el-col>
          <el-col :span="6" class="sea-freight-col">
            <el-select :disabled="!editable"   @change="selectSeaFre"   v-model="documentprocess_cc_lod_seafreightCH" placeholder="请选择">
              <el-option label="预付" value="预付">
              </el-option>
              <el-option label="到付" value="到付">
              </el-option>
            </el-select>
            <span >{{documentprocess_cc_lod_seafreightEN}}</span>
          </el-col>
          <el-col :span="2">
            <p>提单 份数</p>
          </el-col>
          <el-col :span="2">
            <p>正本 3份</p>
          </el-col>
          <el-col :span="3">
            <p>可否转船</p>
          </el-col>
          <el-col :span="2">
            <p>否</p>
          </el-col>
          <el-col :span="3">
            <p>可否分批</p>
          </el-col>
          <el-col :span="2">
            <p>否</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <p>起运港</p>
          </el-col>
          <el-col :span="8">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_loadPort" placeholder="请输入内容" />
          </el-col>
          <el-col :span="4">
            <p>目的港</p>
          </el-col>
          <el-col :span="8">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_destPort" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <p>集装箱预配数</p>
          </el-col>
          <el-col :span="8">
            <el-select :disabled="!editable"   @change="handleSimpleSelect"   v-model="documentprocess_cc_lod_containers" placeholder="请选择">
              <el-option label="20X" value="20X">
              </el-option>
              <el-option label="40X" value="40X">
              </el-option>
              <el-option label="LCL" value="LCL">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <p>装期</p>
          </el-col>
          <el-col :span="8">
            <el-date-picker class="relate-color" value-format="yyyy-MM-dd" format="yyyy-MM" :disabled="!editable"  @change="selectDate"   type="date" v-model="documentprocess_cc_lod_shipDate" placeholder="请选择日期"></el-date-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <p>标记麦码</p>
          </el-col>
          <el-col :span="4">
            <p>件数及包装</p>
          </el-col>
          <el-col :span="8">
            <p>中英文品名DESCRIPTION OF GOODS</p>
          </el-col>
          <el-col :span="3">
            <p>毛重(公斤)</p>
          </el-col>
          <el-col :span="3">
            <p>尺码(立方米)</p>
          </el-col>
          <el-col :span="3">
            <p>成交条件</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_shipMarks" placeholder="请输入内容" />
          </el-col>
          <el-col :span="2">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_numbers" placeholder="请输入内容" />
          </el-col>
          <el-col :span="2">
            <p>PKGS</p>
          </el-col>
          <el-col :span="8">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_products" placeholder="请输入内容" />
          </el-col>
          <el-col :span="2">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_weight" placeholder="请输入内容" />
          </el-col>
          <el-col :span="1">
            <p>KGS</p>
          </el-col>
          <el-col :span="2">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_size" placeholder="请输入内容" />
          </el-col>
          <el-col :span="1">
            <p>CBM</p>
          </el-col>
          <el-col :span="3">
            <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_tradeTerms" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <p>门对门装货地址：</p>
          </el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_doorToDoor" placeholder="请输入内容" />
          </el-col>
          <el-col :span="4">
            <p>货物进仓: </p>
          </el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_entry" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="special-provisions">
            <p>L/C提单特别条款</p>
          </el-col>
          <el-col :span="8" class="special-provisions"></el-col>
          <el-col :span="12" class="-el-col">
            <div class="bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>委托人签名盖章:</p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input type="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_signer" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>寄退单地址:</p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input ype="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_backAddress" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>开票抬头: </p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input ype="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_rise" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>联系人:</p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input ype="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_contact" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>电话: </p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input ype="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_contactTel" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>传真: </p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <input ype="text" @input="handleSimpleInput" :readonly="!editable" v-model="documentprocess_cc_lod_contactFax" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="6">
                      <p>订舱日期:</p>
                    </el-col>
                    <el-col :span="18" class="-el-col">
                      <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable"  @change="handleSimpleSelect"   v-model="documentprocess_cc_lod_date" type="date" placeholder="请选择日期"></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>




    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles">
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>
        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" :key="index" v-for="(item,index) in attachedFiles">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>

</div>

</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import {handleEmit} from '../common.js';

export default {
  created(){

    this.keys.forEach(key => {
        this[key] = _.cloneDeep(this.datas[key]);
    });




  },
  mounted(){
    let self = this;
    
    //关联外贸合同的部分字段
    this.bus.$on('bind-new-ftc',function(ftcData){
      self.documentprocess_cc_lod_contractNO = ftcData.bf_orderNumber;
      self.documentprocess_cc_lod_consignee = ftcData.bf_buy_name;
      self.documentprocess_cc_lod_caddress = ftcData.bf_buy_address;
      self.documentprocess_cc_lod_ctel = ftcData.bf_buy_tel;
      self.documentprocess_cc_lod_loadPort = ftcData.bf_portOfLoad;
      self.documentprocess_cc_lod_destPort = ftcData.bf_portOfDestination;
      self.documentprocess_cc_lod_shipMarks  = ftcData.bf_shippingMarks;
      self.documentprocess_cc_lod_products  = ftcData.bf_table1[0].bf_table1_product;
      self.documentprocess_cc_lod_tradeTerms  = ftcData.bf_tradeTerm;
      self.emitToParent();
    });
  },
  updated(){
  },
  methods: {

    /**
     * 更新数据到单证员报关
     */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromLD", "documentprocess_cc_letterOfDelivery", obj);
    },

    /**
     * 将对应的数据传递给下一个组件
     * @param {String} eventName  事件名称
     * @param {Array} arg   传递的参数
    */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

    selectSeaFre(value){
      if (value === "预付"){
        this.documentprocess_cc_lod_seafreightEN = "SEA FREIGHT PREPAID";
      } else {
        this.documentprocess_cc_lod_seafreightEN = "SEA FREIGHT COLLECT";
      }

      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },


    selectDate(value){
      handleEmit(null, () => {
        this.emitToParent();

        //通知报关发票
        this.emitToNext("documentprocess_cc_customsDeclarationInvoice-shipdate", value);
        
        //通知报关箱单
        this.emitToNext("documentprocess_cc_customsDeclarationBox-shipdate", value);

      });
    },

    handleSimpleSelect(value){
      this.emitToParent();
    },

    /**
     * 处理普通的输入
     */
    handleSimpleInput(){
      this.emitToParent();
    },

    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  watch: {
    datas(newValue, oldValue){

      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: [], //附件
      documentprocess_cc_lod_from: '', //
      documentprocess_cc_lod_to: '',
      documentprocess_cc_lod_fax: '', //货代fax
      documentprocess_cc_lod_transport: '', //运输
      documentprocess_cc_lod_contractNO: '', //合同编号
      documentprocess_cc_lod_consignee: '', //收货人
      documentprocess_cc_lod_caddress: '', //收货地址
      documentprocess_cc_lod_ctel: '', //收货电话
      documentprocess_cc_lod_seafreightCH: '预付', //海洋运费 中文
      documentprocess_cc_lod_seafreightEN: 'PREPAID', //海洋运费 英文
      documentprocess_cc_lod_loadPort: '', //起运港
      documentprocess_cc_lod_destPort: '', //目的港
      documentprocess_cc_lod_containers: '', //集装箱配数
      documentprocess_cc_lod_shipDate: '', //装期
      documentprocess_cc_lod_shipMarks: '', //标记码
      documentprocess_cc_lod_numbers: '', //件数
      documentprocess_cc_lod_products: '', //产品名称
      documentprocess_cc_lod_weight: '', //毛重
      documentprocess_cc_lod_size: '', //尺寸
      documentprocess_cc_lod_tradeTerms: '', //交易方式
      documentprocess_cc_lod_doorToDoor: '', //门对门地址
      documentprocess_cc_lod_entry: '', //货物进仓
      documentprocess_cc_lod_signer: '', //签名
      documentprocess_cc_lod_backAddress: '', //退单地址
      documentprocess_cc_lod_rise: '', //开票抬头
      documentprocess_cc_lod_contact: '', //联系人
      documentprocess_cc_lod_contactTel: '', //联系电话
      documentprocess_cc_lod_contactFax: '', //传真
      documentprocess_cc_lod_date: '', //订单日期
      keys: [
         "id",
         "formInstId",
        "attachedFiles", 
        "documentprocess_cc_lod_from", 
        "documentprocess_cc_lod_to",
        "documentprocess_cc_lod_fax", 
        "documentprocess_cc_lod_transport",
        'documentprocess_cc_lod_contractNO',
        "documentprocess_cc_lod_consignee",
        "documentprocess_cc_lod_caddress",
        "documentprocess_cc_lod_ctel",
        "documentprocess_cc_lod_seafreightCH",
        "documentprocess_cc_lod_seafreightEN",
        "documentprocess_cc_lod_loadPort",
        "documentprocess_cc_lod_destPort",
        "documentprocess_cc_lod_containers",
        "documentprocess_cc_lod_shipDate",
        "documentprocess_cc_lod_shipMarks",
        "documentprocess_cc_lod_numbers",
        "documentprocess_cc_lod_products",
        "documentprocess_cc_lod_weight",
        "documentprocess_cc_lod_size",
        "documentprocess_cc_lod_tradeTerms",
        "documentprocess_cc_lod_doorToDoor",
        "documentprocess_cc_lod_entry",
        "documentprocess_cc_lod_signer",
        "documentprocess_cc_lod_backAddress",
        "documentprocess_cc_lod_rise",
        "documentprocess_cc_lod_contact",
        "documentprocess_cc_lod_contactTel",
        "documentprocess_cc_lod_contactFax",
        "documentprocess_cc_lod_date"
      ]
    }
  }
}
</script>

<style lang="scss">
.letterOfDeliveryVue {

    padding: 20px;
    border: 1px solid #999;

    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }

    .relate-color {
      // background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
   }

    .el-table {
        margin-bottom: 20px;
    }

    .head {
        .btns {
            width: 100%;
            height: 80px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            padding: 20px;
            box-sizing: border-box;

            input {
              width: 80%;
              height: 32px;
              border: none;
              outline: none;
            }

            .el-date-editor.el-input {
                width: 100%;
            }

            .el-input__inner {
                border: none !important;
            }

            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                    input {
                      text-align: center;
                    }
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
            margin-top: 20px;
            padding: 0;
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

    }
}
</style>
